<template>
	<div class="pagination">
		<ul>
			<li class="short-description"><a @click="change(1)" href="javascript:;">首页</a></li>
			<li class="normal-description" v-show="current > 1"><a @click="change(current - 1)" href="javascript:;">上一页</a></li>
			<li v-for="p in pages" :class="{current: current === p}">
				<a @click="change(p)" href="javascript:;">{{p}}</a>
			</li>
			<li class="normal-description" v-show="current < totalPage"><a @click="change(current + 1)" href="javascript:;">下一页</a></li>
			<li class="short-description"><a @click="change(totalPage)" href="javascript:;">尾页</a></li>
			<li class="long-description">当前第{{current}}页 </li>
			<li class="long-description">每页{{pageSize}}条记录 </li>
			<li class="long-description">共{{count}}条记录 </li>
			<li class="normal-description">共{{totalPage}}页 </li>
		</ul>
	</div>
</template>
<script>
export default {
	name: 'pagination',
	props: {
		total: {
			type: Number,
			required: true
		},
		pageSize: {
			type: Number,
			default: 10
		},
		cur: {
			type: Number,
			default: 1
		},
		sizeLimit: {
			type: Number,
			default: 5
		},
		eventName: String
	},
	created() {
		// this.$bus.on(this.eventName, (total) => {
		// 	this.count = total;
		// 	this.init();
		// })
		this.init();
	},
	data() {
		return {
			pages: [],
			count: this.total,
			current: this.cur
		}
	},
	computed: {
		totalPage: function() {
			// this.count = this.$store.state.logCount;
			console.log('logCount', this.$store.state.logsCount)
			console.log(this.count)
			if(this.count === 0) 
				return 0;
			return Math.ceil(this.count / this.pageSize);
		}
	},
	methods: {
		init: function() {
			this.pages.splice(0, this.pages.length);
			if(this.current < this.sizeLimit) {
				let end = Math.min(this.sizeLimit, this.totalPage);
				while(end) {
					this.pages.unshift(end--);
				}
			}else{
				let startIndex = this.current - Math.floor(this.sizeLimit / 2);
				if(startIndex > (this.totalPage - this.sizeLimit))
					startIndex = this.totalPage - this.sizeLimit + 1;

				let end = this.sizeLimit;
				while(end--) {
					this.pages.push(startIndex++);
				}
			}
		},
		change: function(cur) {
			this.current = cur;
			this.$emit('page-change', cur);
		}
	}
}
</script>
<style>
a {
	text-decoration: none;
	color: #444;
}

.pagination ul {
	overflow: hidden;
}

.pagination ul li {
	background: #fff;
	border: 1px solid #ccc;
	float: left;
	width: 36px;
	height: 28px;
	line-height: 28px;
	border-right: none;
	font-size: 12px;
	cursor: pointer;
}



.pagination ul li:last-child {
	border-right: 1px solid #ccc;
}

.pagination ul li a {
	display: block;
	height: 100%;
	widows: 100%;
}

.pagination ul li.current {
	background: #1E9FFF;
}

.pagination ul li.short-description {
	width: 50px;
}

.pagination ul li.normal-description {
	width: 60px;
}

.pagination ul li.long-description {
	width: 90px;
}
</style>